<template>
  <div class="news-detail">
    <index-header></index-header>
    <detail-sec-header :FirstName="this.productName"></detail-sec-header>
    <div class="container">
        <news-left></news-left>
        <news-right :data ="this.data"></news-right>
    </div>
    <index-footer></index-footer>
    
    <!-- <div class="show"></div> -->
  </div>

  
</template>

<script>
import IndexHeader from './../Index/components/Header.vue';
import IndexFooter from './../Index/components/Footer.vue';
import DetailSecHeader from './components/SecHeader.vue';
import NewsLeft from './components/Left.vue';
import NewsRight from './components/Right.vue';


import { mapState } from 'vuex'
import axios from 'axios'
export default {
    name: 'DesignItemDetail',
    components:{
    IndexHeader,
    DetailSecHeader,
    IndexFooter,
    NewsLeft,
    NewsRight
   
    },
    data () {
    return {
        productName:'新闻资讯',
        page:1,
        size:12,
        total:1,
        data:{}
    }
    },
    computed:{
    ...mapState(['baseUrl'])
    },
    watch: {
      '$route' (to, from) {
          // console.log("当前路由路径",this.$route.path);
        //   this.getDetail()
      }
    },
    mounted(){
        // console.log('mounted')
        this.getDetail()
    },
    methods:{
        getDetail(){
           
            axios.get(this.baseUrl+'cms/design_item/one',{
                 params:{
                    id:this.$route.params.id
                }
            }
            
                )
        .then(this.getDetailSucc)
        },
        getDetailSucc(response){
          this.data = response.data
          this.productName = response.data.first_title
        //  console.log(this.data)
        },
        

    }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
html 
    transition all 0.3s
.show
    height 400px
.container 
    
    container()
    margin-top 40px
.body
    overflow hidden
    margin-top 50px
.news-list
    background #f0f1f2

.bg 
    height 60px
    background #e3e4e6
    position relative
.fenye 
    position absolute
    left 50%
    top 50%
    transform translate3d(-50%,-50%,0);
.process 
    margin-top 150px
    margin-bottom 50px
</style>
